<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;      
    }
    .body{
        background-color: #e0e1e6f3;
    }
    .content{
        background-color: #66cccc;
        color: white;
        display: flex;
        align-items: center;
        font-size: 20px;
        height: 60px;
        
    }
    .content > div{
        flex: 1; /* 在所有子元素上使用flex：1 使得所有子元素自动填充整个容器，而不会留下空白*/
        
    }
    .box1{
        
        text-align: left;
        margin: 8px;
    }
    .box2{
        text-align: center;
    }
    .box3{
        text-align: right;
        margin: 8px;
    }
    .phone{
        margin: 8px;
        height: 50px;
        width: 100%;
    } 
    .table1{
        height: 45px;
        width: 100%;
        margin: 8px 0 0 0;
        float: left;
        background-color: white;
    }

    .table1_box1{
        height: 30px;
        width: 10%;
        border-right: 1px solid #66cccc;
        float: left;
        text-align: center;
        margin: 0.469em 0;
    }
    .table1_box2{
        outline: none;
        height: 100%;
        border: white;
        width: 79%;
        float: right;
        margin: 3px 0 0 0; 
    }
    .table2_box1{
        height: 30px;
        width: 10%;
        border-right: 1px solid #66cccc;
        float: left;
        text-align: center;
        margin: 0.469em 0;
    }
    .table2_box2{
        outline: none;
        height: 100%;
        border: white;
        width: 79%;
        float: right;
        margin: 3px 0 0 0; 
    }
    input{
        width: 90%;
        height: 81%;
        font-size: 17px;
        outline: none;
        border: none;
        padding-left: 20px;
        }
    .but{   
        width: 100%;   
        min-height: 20px;   
        background-color: #66cccc;        
        color: #fff;   
        padding: 15px 20px;   
        font-size: 15px;   
        line-height: normal;   
        border: none;
        font-size: 20px;  
    }   
    .forget-pw-safe{
        margin: 10px;
        float: right;
    }
    a{
        color:#66cccc ;
    }


</style>
<body>
    <header>
        <div class="content">
            <div class="box1">注册</div>
            <div class="box2">登陆</div>
            <div class="box3">关闭</div>
        </div>
    </header>
    <main>
        <form action="">
            <div class="table1">
            <div class="table1_box1"><img src="./imags/登陆_02.png" height="40px" width="50px"></div>
            <div class="table1_box2"><input type="text" maxlength="11"  style="height: 80%;" placeholder="请输入你的账号"></div>
        </div>
        <div class="table2">
            <div class="table2_box1"><img src="./imags/登录_04.png" height="40px" width="50px"></div>
            <div class="table2_box2"><input type="password" maxlength="16" style="height: 80%;"  placeholder="请输入你的密码" ></div>
        </div>
        <div>
            <button class="but" type="submit">登录</button>
        </div>
    </form>
    <div class="forget-pw-safe">
        <span>
            <a href="www.baidu.com">忘记密码</a>
        </span>
        
    </div>
        
    </main>
    
    
</body>
</html>